import React, { useState, useEffect } from 'react';
import './TimeRangeSelector.css';

const TimeRangeSelector = ({ onTimeRangeChange }) => {
  const [activeRange, setActiveRange] = useState('today');
  const [dateRange, setDateRange] = useState({ start: '', end: '' });
  const [showCustom, setShowCustom] = useState(false);

  // 快捷选项
  const quickRanges = [
    { label: '今天', value: 'today' },
    { label: '昨天', value: 'yesterday' },
    { label: '近3天', value: 'last3days' },
    { label: '近7天', value: 'last7days' },
    { label: '本月', value: 'thisMonth' },
    { label: '自定义', value: 'custom' }
  ];

  // 处理快捷选项选择
  const handleQuickRangeSelect = (value) => {
    setActiveRange(value);
    
    if (value === 'custom') {
      const now = new Date();
      const start = new Date();
      start.setHours(0, 0, 0, 0);
      
      setDateRange({
        start: start.toISOString().slice(0, 16),
        end: now.toISOString().slice(0, 16)
      });
      setShowCustom(true);
      return;
    }

    setShowCustom(false);
    const now = new Date();
    let start = new Date();
    let end = new Date();

    switch (value) {
      case 'today':
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        break;
      case 'yesterday':
        start.setDate(start.getDate() - 1);
        start.setHours(0, 0, 0, 0);
        end.setDate(end.getDate() - 1);
        end.setHours(23, 59, 59, 999);
        break;
      case 'last3days':
        start.setDate(start.getDate() - 2);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        break;
      case 'last7days':
        start.setDate(start.getDate() - 6);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        break;
      case 'thisMonth':
        start.setDate(1);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        break;
      default:
        break;
    }

    onTimeRangeChange({
      start: start.toISOString(),
      end: end.toISOString()
    });
  };

  // 处理日期时间变化
  const handleDateChange = (type, value) => {
    const newRange = { ...dateRange, [type]: value };
    setDateRange(newRange);

    if (newRange.start && newRange.end) {
      const start = new Date(newRange.start);
      const end = new Date(newRange.end);

      if (start > end) {
        alert('开始时间不能晚于结束时间');
        return;
      }

      // 设置结束时间到当天的最后一秒
      end.setHours(23, 59, 59, 999);

      onTimeRangeChange({
        start: start.toISOString(),
        end: end.toISOString()
      });
    }
  };

  // 初始化默认选择今天
  useEffect(() => {
    handleQuickRangeSelect('today');
  }, []);

  return (
    <div className="time-range-selector">
      <div className="quick-ranges">
        {quickRanges.map(({ label, value }) => (
          <button
            key={value}
            type="button"
            className={`quick-range-btn ${activeRange === value ? 'active' : ''}`}
            onClick={() => handleQuickRangeSelect(value)}
          >
            {label}
          </button>
        ))}
      </div>

      {showCustom && (
        <div className="datetime-inputs">
          <input
            type="datetime-local"
            value={dateRange.start}
            onChange={(e) => handleDateChange('start', e.target.value)}
            className="datetime-input"
            placeholder="开始时间"
          />
          <span className="separator">至</span>
          <input
            type="datetime-local"
            value={dateRange.end}
            onChange={(e) => handleDateChange('end', e.target.value)}
            className="datetime-input"
            placeholder="结束时间"
          />
          <button 
            className="submit-btn"
            onClick={() => {
              if (dateRange.start && dateRange.end) {
                const start = new Date(dateRange.start);
                const end = new Date(dateRange.end);
                end.setHours(23, 59, 59, 999);
                onTimeRangeChange({
                  start: start.toISOString(),
                  end: end.toISOString()
                });
              }
            }}
          >
            确定
          </button>
        </div>
      )}
    </div>
  );
};

export default TimeRangeSelector; 